<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM（针对页面操作）+BOM（针对浏览器）
		 学习主体：针对页面操作比较多  ---DOM操作
		 JQuery操作DOM：理解：JQ框架改变页面内容效果
		 js基础就可以直接学习，了解函数使用
		 基础函数---事件源之后出现，事件源语法糖中
		 html()    作用：增加一个元素，覆盖原有html
		 val()     作用：针对input元素，实现修改文本框内容
		 text()    作用：生成文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后：下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam suscipit reprehenderit aspernatur maxime adipisci, vitae quae quasi amet a, dicta dolorem ipsum consequatur at. Quam, cum dolorem? Adipisci, rerum nihil.</p>
	<div style="width: 200px; height: 200px; background-color: #333;"></div>
	<h3>lorem</h3>
	<input type="button"  value="按钮2"/>
	<input type="text" />
	<script>
		$("button").click(function(){
			/*JQ操作DOM--html()函数使用*/
			$("p").html("<h1>JQ操作DOM-html函数使用</h1>")
		});
		/*练习：div 200*200背景颜色：黑色 鼠标滑过之后
		下面内容修改：<h3>提示,修改为黄颜色
		*/
	   $("div").mouseenter(function(){
		  $("h3").html("<h3>黄颜色</h3>")
	   });
	   
	   /*练习：按钮 文本框    点击按钮  文本增加一行文本*/
	   $("input[type='button']").click(function(){
		 //alert("xzq") 
		  $("input[type='text']").val("文本框内容修改")
	   });
	   /*利用JQ操作DOM(页面效果) ：1.元素内容操作（3个函数）
	                            html()
								val()
								text()
	                             2.属性操作（4个函数）
								 <p align="center">
								 attr()
								 removeAttr()
								 <input checked>
								 prop()
								 removeProp()
								 3.样式类名操作（4个操作）
								 add.class{属性：属性值..}
								 addClass()
								 removeClass()
								 toggleClass()
								 hasClass()
								 4.元素样式操作（5个函数）
								 css()
								 语法：css("css属性"，"css属性值")
								 $("选择器").attr().addClass()       
								 5.插入和删除和修改操作（7个函数）
								 增：append() 和prepend()
								 增：after()和before()
								 删：remove()和empty()
								 改：replaceWith()
								 元素遍历操作（6个操作）
								 children() parent()  
								 siblings()
								next() prev() 
								each()  
								 JQ动画操作(7个操作)
	   */
	</script>
	</body>
</html>